<script setup lang="ts">
import {onMounted, ref, watch} from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import {getThreeDimensionalModels,getLastDataAlarmList} from '@/api/base'
import IconDropDown from '@/components/IconDropDown.vue';
import list1 from '@/assets/home/home-list1.png';
import list2 from '@/assets/home/home-list2.png';
import list3 from '@/assets/home/home-list3.png';
import list4 from '@/assets/home/home-list4.png';
const ops = ref<any>([])
const opActive = ref<number>(0)
const modelObj = ref<any>({})
const alarmList = ref<any>([])

const isImageUrl=(url?:string)=> {
  if (typeof url !== 'string') return false;

  const imageExtensions = /\.(jpg|jpeg|png|gif|bmp|webp|svg|tiff|ico)$/i;
  const dataUrlPattern = /^data:image\/([a-z+]+);base64,/i;

  return imageExtensions.test(url.trim()) || dataUrlPattern.test(url.trim());
}

onMounted(() => {
  getThreeDimensionalModels().then((res)=>{
    if(res.code===200){
      ops.value=res.data?.map(item=>{
        return {
          ...item,
          uType:isImageUrl(item.modelFile)
        }
      })
      opActive.value=ops.value[0].id
    }
  })
})

enum AlarmType {
  Device = 0,
  Process = 1,
  Energy = 2,
  Environmental = 3,
  Inspection = 4,
  SafetyHelmet = 5
}

const getAlarmTypeDescription = (type: AlarmType): string => {
  switch (type) {
    case AlarmType.Device:
      return "装置报警";
    case AlarmType.Process:
      return "工艺报警";
    case AlarmType.Energy:
      return "能耗报警";
    case AlarmType.Environmental:
      return "环保报警";
    case AlarmType.Inspection:
      return "巡检报警";
    case AlarmType.SafetyHelmet:
      return "安全帽报警";
    default:
      return "未知报警";
  }
};

watch(() => opActive.value, (newValue) => {
  if(!newValue){
    return;
  }
  modelObj.value = ops.value.find((item: any) => item.id === newValue);
  getLastDataAlarmList(modelObj.value.classroomId).then((res) => {
    if (res.code === 200) {
      alarmList.value = res.data?.map((item: any) => {
        item.alarmValue2 = [item.alarmValue];
        item.type_ext = getAlarmTypeDescription(item.type as AlarmType);
        return item;
      });
    }
  });
}, { immediate: true });

/* 固定 常用应用图标*/
const appList = [
  {
    img: list1,
    name: '装置监控',
    url: 'Device'
  },
  {
    img: list2,
    name: 'AI行为分析',
    url: 'Behavior'
  },
  {
    img: list3,
    name: '安全用电',
    url: 'Electricity'
  },
  {
    img: list4,
    name: '化工工艺',
    url: 'Chemical'
  },
  // {
  //   img: list5,
  //   name: '成绩公告',
  //   url: 'Notice'
  // }
]

const goToPage = (url:string) => {
  router.push({ name: url, query: { cid: modelObj.value?.classroomId,mid:modelObj.value?.id} });
}


</script>

<template>
  <div class="home-all">
    <div class="home-left">
      <div class="home-left_cont">
        <div>
          <el-select
              v-model="opActive"
              placeholder="Select"
              size="large"
              :suffix-icon="IconDropDown"
              :teleported="false"
              class="home-select public-select"
          >
            <el-option
                v-for="item in ops"
                :key="item.id"
                :label="item.modelName"
                :value="item.id"
            />
          </el-select>
        </div>
        <div class="home-left-img">
          <img v-if="modelObj.modelFile" :src="modelObj.modelFile"  alt="" style="width: 100%; height: 100%;object-fit: fill">
          <iframe v-else :src="modelObj.modelFile" style="width: 100%; height: 100%;border: none"></iframe>
        </div>
      </div>
    </div>
    <div class="home-right">
      <div class="home-right-top">
        <div class="public-app public-list_tit" />
        <div class="home-app_list">
          <div class="home-app_li" v-for="(item,index) in appList" :key="index" @click="goToPage(item.url)">
            <img :src="item.img" alt="">
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
      <div class="home-right-table">
        <div class="public-alarm public-list_tit" />
        <div class="home-table">
<!--          <el-table :data="alarmList" show-overflow-tooltip class="public-table" header-row-class-name="public-header_row" header-cell-class-name="public-header_cell" row-class-name="public-body_row" cell-class-name="public-body_cell">-->
          <el-table height="660" :data="alarmList"  class="public-table" header-row-class-name="public-header_row" header-cell-class-name="public-header_cell" row-class-name="public-body_row" cell-class-name="public-body_cell">
            <el-table-column prop="deviceName" label="装备名称" align="center" header-align="center">
              <template #default="scope">
                <div class="table_name">{{ scope.row.deviceName }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="pointName" label="点位名称" align="center" header-align="center" />
            <el-table-column prop="type_ext" label="告警内容" align="center" header-align="center">
              <template #default="scope">
                <div class="public-table_tit" :style="{color: scope.row.alarmColor}">{{ scope.row.type_ext }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="createDate" label="时间" align="center" header-align="center" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
.home-all{
  display: flex;
  padding-left: 10px;
  .home-left{
    width: 1402px;
    padding-top: 45px;
  }
}

.home-left_cont{
  background: url("@/assets/home/home-bg.png") no-repeat;
  width: 100%;
  height: 895px;
  padding: 36px 45px;
  box-sizing: border-box;
}

.home-left-img{
  margin-top: 30px;
  padding: 0 30px 96px 30px;
  height: 801px;
  img{
    width: 100%;
    height: 100%;
  }
}
.home-select{
  width: 300px;
}

:deep(.home-select .el-select__wrapper){
  background: rgba(5,35,72,0.41);
  border-radius: 5px;
  border: 1px solid #00AAFE;
  height: 65px;
  padding-left: 20px;
}

.home-app_list{
  padding: 37px 12px 44px 39px;
  display: flex;
  align-items: center;
  .home-app_li{
    margin-right: 33px;
    text-align: center;
    &.home-app_li:last-child{
      margin-right: 0;
    }
    img{
      width: 61px;
      height: 61px;
      margin-bottom: 16px;
    }
    p{
      font-family: AlimamaShuHeiTi;
      font-size: 12px;
      color: #fff;
      line-height: 17px;
      font-style: normal;
    }
  }
}

.public-app{
  background: url("@/assets/list-tit4.png") no-repeat;
}

.public-alarm{
  background: url("@/assets/list-tit5.png") no-repeat;
}

.home-table{
  padding: 14px 0 0 26px;
}

.public-table_tit {
  color: #10F9FD;
}

.table_name{
  border-left: 2px solid #44F1FF;
}

:deep(.public-table .el-table__cell:first-child .cell){
    padding-left: 0;
}

:deep(.public-table) {
  background: rgba(255,255,255,0);
  --el-table-bg-color: rgba(255,255,255,0);
  --el-table-tr-bg-color: rgba(255,255,255,0);
  --el-table-header-bg-color: rgba(255,255,255,0);
}

:deep(.public-table .el-table__cell) {
  border-top: 1px dashed rgba(68,241,255,0.15) !important;
  border-bottom: 1px dashed rgba(68,241,255,0.15) !important;
}
:deep(.public-table .el-table__cell:first-child) {
  border-left: 1px dashed rgba(68,241,255,0.15) !important;
}
:deep(.public-table .el-table__cell:last-child) {
  border-right: 1px dashed rgba(68,241,255,0.15) !important;
}

:deep(.public-table .el-table__inner-wrapper:before) {
  height: 0;
}
:deep(.public-table .el-table__header-wrapper th) {
  border-color: rgba(255,255,255,0) !important; /* 改变边框颜色 */
}
:deep(.public-header_row) {
  background-color: rgba(68,241,255,0.29) !important;
}

:deep(.public-header_cell) {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #fff;
  font-style: normal;
}

:deep(.public-body_row) {
  background: rgba(255,255,255,0) !important;
}

:deep(.public-body_cell) {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #fff;
  font-style: normal;
}

:deep(.public-table td.el-table__cell) {
  border: none;
}

:deep(.public-table .el-table__body) {
  -webkit-border-vertical-spacing: 4px;
}

:deep(.public-table .el-table__body tr>td) {
  background-color: rgba(255,255,255,0) !important;
}
</style>